<template>
  <div class="coursePlan">
    <mt-header title="课设安排">
      <router-link to="/MainContent" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>

    <div class="page-picker-wrapper">
      <mt-picker :slots="dateSlots" @change="onDateChange" :visible-item-count="1"></mt-picker>
    </div>
    <p class="tip">学年: {{ dateStart }} 至 {{ dateEnd }}</p>

    <div class="page-picker-wrapper">
      <mt-picker :slots="yearSlot" @change="onYearChange" :visible-item-count="1"></mt-picker>
    </div>
    <p class="tip">学期: {{ year }}</p>

    <mt-button type="primary" size="large" style="width:99%;margin:0 auto" @click="toList">
      查询
      <img src="./search.png" height="20" width="20" slot="icon">
    </mt-button>
  </div>
</template>
<script>
  export default{
    name:'coursePlan',
    data(){
      return {
        dateSlots: [
          {
            flex: 1,
            values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
            className: 'slot3',
            textAlign: 'left'
          }
        ],
        dateStart: '2002',
        dateEnd: '2003',

        //选择学期
        yearSlot: [{
          flex: 1,
          values: ['1', '2'],
          className: 'slot1',
          textAlign:'center'
        }],
        year:'0',
      }
    },
    methods:{
      onDateChange(picker, values) {
        if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0]);
        }
        this.dateStart = values[0];
        this.dateEnd = values[1];
      },
      onYearChange(picker, values) {
        this.year = values[0];
      },
      toList(){
        this.$router.push({name:'CoursePlanListInfo'});
      }
    }
  }
</script>
<style>
  .tip{
    color:rgb(38,162,255);
    font-family: "Meiryo UI";
    padding:5px;

  }
</style>
